<template>
  <div>
    <div class="title_div">
      <div class="box">
        <div>成员管理</div>
        <el-button icon="el-icon-refresh" @click="renovate">刷新</el-button>
      </div>
    </div>

    <!-- 查询 -->
    <div class="search_box">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <div class="clearfix_div">
            <i class="el-icon-search"></i>
            筛选查询
          </div>
          <div>
            <span>
              <i class="el-icon-arrow-up"></i>
              收起筛选
            </span>
            <el-button>查询结果</el-button>
          </div>
        </div>

        <div class="search_inp">
          <span>
            输入搜索：
            <el-input v-model="input" placeholder="用户名/姓名"></el-input>
          </span>
          <span>
            所属部门：
            <el-select v-model="select" slot="prepend" placeholder="全部">
              <el-option label="1" value="1"></el-option>
              <el-option label="2" value="2"></el-option>
              <el-option label="3" value="3"></el-option>
            </el-select>
          </span>
        </div>
      </el-card>
    </div>

    <!-- 表格部分 -->
    <div class="search_box">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <div class="clearfix_div">
            <i class="el-icon-s-operation"></i>
            数据列表
          </div>
          <div>
            <el-button @click="toAdd">添加</el-button>
            <span>
              <el-select
                class="tab_select"
                v-model="total"
                slot="prepend"
                placeholder="显示条数"
              >
                <el-option label="4" value="1"></el-option>
                <el-option label="8" value="2"></el-option>
                <el-option label="12" value="3"></el-option>
                <el-option label="20" value="4"></el-option>
              </el-select>
            </span>
            <span>
              <el-select
                class="tab_select"
                v-model="sort"
                slot="prepend"
                placeholder="排序方式"
              >
                <el-option label="从大到小" value="1"></el-option>
                <el-option label="从小到大" value="2"></el-option>
              </el-select>
            </span>
          </div>
        </div>
        <!-- tabbar表格 -->
        <div class="table_div">
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="member" label="成员账号"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="email" label="邮箱地址"></el-table-column>
            <el-table-column
              prop="department"
              label="所属部门"
            ></el-table-column>
            <el-table-column prop="time" label="添加时间"></el-table-column>
            <el-table-column prop="lastTime" label="最后登录"></el-table-column>
            <el-table-column prop="mg_state" label="是否启用">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.mg_state"
                  active-color="#1abc9c"
                  inactive-color="#ff4949"
                  @change="changeStatus(scope.row, scope.$index)"
                ></el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作" width="200">
              <el-button type="text" style="color: #1ac2c6">权限设置</el-button>
              <el-button type="text" style="color: #1ac2c6" @click="toAdd"
                >编辑</el-button
              >
              <el-button type="text" style="color: #1ac2c6">删除</el-button>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <div class="block">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-size="2"
            layout="total, prev, pager, next, jumper"
            :total="100"
          ></el-pagination>
        </div>
      </el-card>
    </div>
    <!-- 页面下层数据 -->
    <div class="bottom">
      <div>Copyright © www.AxureUX.com, All Rights Reserved.</div>
      <div>Email: 5698401@qq.com QQ:5698401</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CodeAccount",

  data() {
    return {
      input: "",
      select: "",
      total: "",
      sort: "",
      currentPage4: 1,
      tableData: [
        {
          member: "windir",
          name: "大梨",
          email: "5698401@qq.com",
          department: "销售部",
          time: "2017-08-05 15:47:44",
          lastTime: "2017-08-05 15:47:44",
          mg_state: true,
        },
        {
          member: "windir",
          name: "大梨",
          email: "5698401@qq.com",
          department: "销售部",
          time: "2017-08-05 15:47:44",
          lastTime: "2017-08-05 15:47:44",
          mg_state: true,
        },
        {
          member: "windir",
          name: "大梨",
          email: "5698401@qq.com",
          department: "销售部",
          time: "2017-08-05 15:47:44",
          lastTime: "2017-08-05 15:47:44",
          mg_state: true,
        },
        {
          member: "windir",
          name: "大梨",
          email: "5698401@qq.com",
          department: "销售部",
          time: "2017-08-05 15:47:44",
          lastTime: "2017-08-05 15:47:44",
          mg_state: true,
        },
        {
          member: "windir",
          name: "大梨",
          email: "5698401@qq.com",
          department: "销售部",
          time: "2017-08-05 15:47:44",
          lastTime: "2017-08-05 15:47:44",
          mg_state: true,
        },
        {
          member: "windir",
          name: "大梨",
          email: "5698401@qq.com",
          department: "销售部",
          time: "2017-08-05 15:47:44",
          lastTime: "2017-08-05 15:47:44",
          mg_state: true,
        },
      ],
    };
  },

  mounted() {},

  methods: {
    toAdd() {
      this.$router.push("/home/addMembers");
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 改变状态
    changeStatus(row, index) {
      console.log(row, index);
    },
    // 点击刷新
    renovate() {
      this.$router.go(0);
    },
  },
};
</script>

<style lang="less" scoped>
.title_div {
  background: #f3f3f3;
  height: 50px;
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid #e4e4e4;
}

.box {
  width: 85%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .el-button {
    height: 40px;
  }

  div {
    height: 15px;
    line-height: 15px;
    border-left: 6px solid #1abc9c;
    padding: 4px;
  }
}

.search_box {
  display: flex;
  justify-content: space-around;
}

.box-card {
  width: 85%;
  margin: 20px 0;
}

.clearfix {
  display: flex;
  justify-content: space-between;

  .el-button {
    margin-left: 10px;
  }

  .clearfix_div {
    line-height: 40px;
  }
}

/deep/.el-card__header {
  background: #f3f3f3;
}

.el-input {
  width: 200px;
  margin-right: 40px;
}

.tab_select {
  width: 125px;
  margin-left: 20px;
}

.block {
  text-align: right;
  margin: 15px 0;
}

// 分页中按钮的背景颜色
::v-deep {
  .el-pagination.is-background .el-pager li:not(.disabled) {
    background-color: #fff; // 未选中背景和字体
    // color: #fff;
  }

  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #1abc9c; // 选中项背景和字体
    color: #fff;
  }
}

/deep/th > .cell {
  text-align: center;
  font-weight: 600;
  color: #000;
}

/deep/td > .cell {
  text-align: center;
  font-size: 12px;
}

/deep/.el-card__body {
  padding: 0;
}

.search_inp {
  padding: 20px;
}
.search_box {
  text-align: left;
}
.bottom {
  width: 100%;
  height: 100px;
  font-size: 14px;
  color: rgb(218, 218, 218);
  text-align: center;
}
</style>